<!--
 * @Author: windys
 * @Description: 商品详情
 * @Date: 2022-03-22 16:07:48
-->

<template>
  <div class="page">
    <van-nav-bar
      left-text="返回"
      fixed
      left-arrow
      @click-left="handleLeftClick"
    />

    <div class="mall_detail">
      <van-image :src="item.coverUrl" fit="contain" />
      <div class="name">{{ item.name }}</div>
      <div class="footer">
        <span>
          {{ item.score }}积分
          <i>+ {{ item.sellPrice }}元</i>
        </span>
        <b>
          <i class="iconfont icon-jingdong"></i> 京东指导价:{{
            item.marketPrice
          }}元</b
        >
      </div>
    </div>

    <div class="tips">
      <div class="title">兑换须知</div>
      <div>
        1. 积分一经使用不支持退换。<br />
        2.下单时，请填写正确的收获地址，否则无法安排正常发货。<br />
        3.每次购买只能购买一次商品。<br />
        4.所有超值换购商品不支持退换货。
      </div>
    </div>

    <div class="mall_detail">
      <div class="titile">商品介绍</div>
      <van-image
        v-for="el in dtlList"
        :src="el"
        :key="el"
        fit="contain"
        @click="handleView"
      />
    </div>

    <van-button type="primary" block round @click="handleGetSku"
      >立即兑换
    </van-button>

    <SkuPop ref="SkuPop"></SkuPop>
  </div>
</template>

<script>
import { ImagePreview } from "vant";
import SkuPop from "./skuPop.vue";
import {
  defineComponent,
  ref,
  reactive,
  nextTick,
  onMounted,
  toRaw,
  toRefs,
  watch,
} from "vue";
import { useRoute, useRouter } from "vue-router";
import { ApiGetGoodSKU, ApiGetAddrList } from "../../../api/mall";
export default defineComponent({
  components: {
    SkuPop,
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const item = JSON.parse(route.query.item);
    const dtlList = ref([]);
    const address = ref({});
    onMounted(async () => {
      dtlList.value = JSON.parse(item.dtlList);
      const res = await ApiGetAddrList({});
      if (res && res.length) {
        address.value = res.filter((el) => el.isDefault == 1);
      }
    });
    const handleLeftClick = () => {
      router.push("/mallList");
    };
    const handleView = () => {
      ImagePreview(dtlList.value);
    };

    const SkuPop = ref();
    const handleGetSku = async () => {
      const res = await ApiGetGoodSKU({
        spuId: item.spuId,
        addressId: address.value[0].id,
      });
      if (res) {
        SkuPop.value.addr = address.value;
        SkuPop.value.skuData = res;
        SkuPop.value.show = true;
      }
    };
    return {
      SkuPop,
      item,
      dtlList,
      handleLeftClick,
      handleView,
      handleGetSku,
    };
  },
});
</script>



<style scoped lang='scss'>
.mall_detail {
  .name {
    font-size: 16px;
    color: #404244;
    font-weight: bold;
  }
  .footer {
    font-size: 14px;
    margin: 5px 0;
    position: relative;
    span {
      font-size: 20px;
      color: #eca013;
      i {
        font-size: 14px;
        color: #999;
        color: red;
      }
    }
    b {
      position: absolute;
      right: 10px;
      font-weight: normal;
      top: 5px;
      color: #fa4040;

      i {
        font-size: 14px;
        color: #999;
        color: red;
        padding: 2px;
      }
    }
  }
}
.page {
  padding-top: 50px;
  padding-bottom: 100px;
}
.tips {
  font-size: 14px;
  color: #999;
  padding: 5px;
  border-bottom: 15px solid #f5f6f8;
  border-top: 15px solid #f5f6f8;
  .title {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
    color: #000;
    margin: 5px 0;
  }
}
.mall_detail {
  padding: 5px;
  .titile {
    font-size: 16px;
    text-align: left;
    font-weight: bold;
  }
  .van-image {
    width: 100%;
    height: 250px;
  }
}
button {
  position: fixed;
  bottom: 20px;
  width: 90%;
  left: 5%;
}
</style>